<template>
  <el-empty :description="description" :imageSize="imageSize" :style="{ width: newWidth, height: newHeight }">
    <template #image>
      <img class="img" :src="imgUrl" :style="{ width: newImageSize, height: newImageSize }" draggable="false" />
    </template>
    <template #default>
      <el-button v-for="(item, index) in pageLoadButton" :key="index" round style="width: 40%; min-width: 120px; max-width: 240px" @click="item.callBack">
        {{ item.text }}
      </el-button>
    </template>
  </el-empty>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue';
  import errImgUrl from '@/assets/images/global-state/fail-load.svg';
  import nullImgUrl from '@/assets/images/global-state/not-data.svg';
  import noNetImgUrl from '@/assets/images/global-state/not-network.svg';
  import noPermissionImgUrl from '@/assets/images/global-state/not-permission.svg';

  const props = defineProps({
    /** 组件的宽度 */
    width: { type: [String, Number] as PropType<number | string>, default: '100%' },
    /** 组件的高度 */
    height: { type: [String, Number] as PropType<number | string>, default: '100%' },
    /** 提示文字 */
    description: { type: String, default: '暂无数据' },
    /** 提示图标的大小 */
    imageSize: { type: Number, default: 140 },
    /** 当前的状态 */
    loadState: { type: [String, Boolean] as PropType<Exclude<$LoadState, boolean> | false>, default: 'null' },
    /** 自定义操作按钮 */
    pageLoadButton: { type: Array as PropType<$PageLoadButton[]>, default: () => [] },
  });

  const imgTypeData = { err: errImgUrl, null: nullImgUrl, noNet: noNetImgUrl, noPermission: noPermissionImgUrl };
  const newImageSize = computed(() => `${props.imageSize}px`);
  const imgUrl = computed(() => {
    return typeof props.loadState === 'string' ? imgTypeData[props.loadState] || errImgUrl : errImgUrl;
  });

  const newWidth = computed(() => (typeof props.width === 'number' ? (props.width >= 0 ? `${props.width}px` : '100%') : props.width));
  const newHeight = computed(() => (typeof props.height === 'number' ? (props.height >= 0 ? `${props.height}px` : '100%') : props.height));
</script>

<style lang="scss" scoped>
  .el-empty {
    width: 100%;
    height: 100%;

    :deep(.el-empty__bottom) {
      width: 100%;
    }
  }

  html.dark .el-empty .img {
    opacity: 0.5;
  }
</style>
